<template>
  <AnalysisWrap titleText="可视域" info="提示:单击按钮后在图上绘制，红色代表不可视，绿色代表可视。" @goAnalysisOtherViewFn="goAnalysisOtherView">
    <template #container>
      <div class="control">
        <span class="lable">四周方向:</span>
        <mars-slider class="control-slider" v-model:value="headingVal" @change="onChangeHeading" :min="0" :max="360" :step="1" />
        <mars-input class="control-input" v-model:value="headingVal" />
      </div>

      <div class="f-mb control">
        <span class="lable">视角距离:</span>
        <mars-slider class="control-slider" v-model:value="distanceVal" @change="distance" :min="1" :max="5000" :step="1" />
        <mars-input class="control-input" v-model:value="distanceVal" />
      </div>
      <div class="f-mb control">
        <span class="lable">透 明 度:</span>
        <mars-slider class="control-slider" v-model:value="opacityVal" @change="onChangeOpacity" :min="0" :max="1" :step="0.1" />
        <mars-input class="control-input" v-model:value="opacityVal" />
      </div>
      <div class="f-mb control">
        <span class="lable">视椎线框:</span>
        <a-checkbox class="control-check" @change="chkDebugFrustum" v-model:checked="checked">显示框线</a-checkbox>
      </div>

      <div class="control-play">
        <mars-button class="add" @click="addPoint">添加可视域</mars-button>
        <mars-button class="clear" danger @click="removeVisible"> 清除</mars-button>
      </div>
    </template>
  </AnalysisWrap>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue"
import AnalysisWrap from "./analysis-wrap.vue"
import * as mapWork from "./map"

const emit = defineEmits(["goAnalysisOtherView"])

function goAnalysisOtherView(name: string) {
  emit("goAnalysisOtherView", name)
}

onMounted(() => {
  mapWork.onMountedVisible()
})
onUnmounted(() => {
  mapWork.onUnmountedVisible()
})

const checked = ref<boolean>(true)

const headingVal = ref<number>(0)
const opacityVal = ref<number>(0.8)
const distanceVal = ref<number>(1000)

// 四周方向
const onChangeHeading = () => {
  mapWork.getLastViewShed("heading", headingVal.value)
}

// 透明度
const onChangeOpacity = () => {
  mapWork.getLastViewShed("opacity", opacityVal.value)
}

// 视角距离
const distance = () => {
  mapWork.getLastViewShed("distance", distanceVal.value)
}

// 视椎线框
const chkDebugFrustum = () => {
  mapWork.getLastViewShed("showFrustum", checked.value)
}

const addPoint = () => {
  mapWork.drawViewShed(opacityVal.value, checked.value).then((e) => {
    headingVal.value = Math.round(e.heading)
    distanceVal.value = Math.round(e.distance)
  })
}

const removeVisible = () => {
  mapWork.clearVisible()
}
</script>
<style scoped lang="less">
.control {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .lable {
    text-align: left;
    width: 75px;
    font-size: 14px;
    margin-right: 8px;
    color: rgba(234, 242, 255, 0.8);
  }
  .control-input {
    width: 75px;
    margin-left: 10px;
  }
  .control-check {
    position: relative;
    left: -10px;
  }
}

.control-play {
  display: flex;
  .add {
    flex: 1;
  }
  .clear {
    flex: 1;
    margin-left: 10px;
  }
}
.ant-slider {
  width: 180px !important;
}
</style>
